<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="procurementList h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" left-icon="left" backgroundColor="#FF7C00" dark :border="false" @clickLeft="back">
        <view class="inputView flcv">
          <input confirm-type="search" type="text" v-model="keywords" class="input" placeholder="标题/描述/联系人/手机号/分类" @confirm="confirm" />
        </view>
      </uni-nav-bar>
    </view>
    <view :style="globalData.appStyle.contentStyle1">
      <view class="contentWithFooter oyh" :style="contentWithFooterStyle">
        <view class="tagBox flb w100p">
          <text v-for="(item, index) in tagList" :key="item" class="tag" :class="{ activeTag: index === Number(status) }" @click.stop="tagClick(index)">{{ item }}</text>
        </view>
        <view class="listBox">
          <scroll-view scroll-y class="scrollList" @scrolltolower="getProcurementList" v-if="procurementList.length > 0">
            <view v-for="(item, index) in procurementList" :key="item.id" class="itemBox" :class="{ noTop: index === 0 }" @click="jumpProcurement(item, 'look')">
              <view class="titleBox flr">
                <view v-if="item.status === '1'" class="look">审核中</view>
                <view v-else-if="item.status === '2'" class="check">正在找</view>
                <view v-else-if="item.status === '3'" class="unpass">未通过</view>
                <view v-else-if="item.status === '4'" class="under">已下架</view>
                <view class="titleLabel ell1">{{ item.title || item.detailInfo }}</view>
              </view>
              <view class="status flr">
                <view v-if="item.isTopping === '1'" class="top tc">置顶中</view>
                <view v-else class="top tc op0" @click="jumpToPage(`/pages/global/msg-to-top/index?saleInfoId=${item.id}`)">置顶</view>
                <view class="concrat fle">
                  <view class="tagNum lookNum tc" :class="[status === '4' ? 'cGY1' : 'cYE']" @click.stop="viewClick(item)">
                    <text class="mr4">查看</text>
                    <text class="mr4">{{ item.checkQty }}</text>
                    <uni-icons type="right" size="16" color="#ff7c00" v-if="status !== 4" />
                    <uni-icons type="right" size="16" color="#a6a6a6" v-else />
                  </view>
                  <view class="tagNum connectNum tc" :class="[status === '4' ? 'cGY1' : 'cYE']" @click.stop="connectClick(item)">
                    <text class="mr4">联系</text>
                    <text class="mr4">{{ item.contactQty }}</text>
                    <uni-icons type="right" size="16" color="#ff7c00" v-if="status !== 4" />
                    <uni-icons type="right" size="16" color="#a6a6a6" v-else />
                  </view>
                </view>
              </view>
              <view v-if="item.status === '1'" class="cGY infoLabel">您发布的需求信息正在审核中，请耐心等待</view>
              <view v-if="item.status === '3'" class="cGY infoLabel">{{ item.auditReason }}</view>
              <view class="operateBox flb">
                <view class="timeBox flc">
                  <view class="time cGY">{{ item.createTime }}</view>
                  <view class="userInfo cGY">
                    <text class="mr6">{{ `${item.realName ? '' : '*先生'}` }}</text>
                    <text>{{ `${item.contactPhoneNumber}` }}</text>
                  </view>
                </view>
                <view class="operateList flr fla">
                  <view v-if="['1', '2', '3', '4'].indexOf(item.status) !== -1" class="operate modify" @click.stop="jumpProcurement(item, 'modify')">修改</view>
                  <view v-if="['1', '2', '3'].indexOf(item.status) !== -1" class="operate down" @click.stop="offShelf(item)">下架</view>
                  <view v-if="['2', '3'].indexOf(item.status) !== -1" class="operate customerSerive">联系客服</view>
                  <view v-if="item.status === '4'" class="operate del" @click.stop="saleDel(item)">删除</view>
                  <view v-if="item.status === '4'" class="operate republic" @click.stop="jumpProcurement(item, 'republish')">重新发布</view>
                </view>
              </view>
            </view>
          </scroll-view>
          <view class="noData" v-if="procurementList.length === 0">
            <view class="noDataImgBox flca">
              <image class="nodataImg" src="https://qzdsoft.oss-cn-shenzhen.aliyuncs.com/9b45410e958a47c68d56e64cc27fbc29e.jfif" mode="scaleToFill" />
            </view>
            <view class="noRecord">暂无记录</view>
          </view>
        </view>
      </view>
      <FixedBottomBtn v-if="showFixedBottom" btnText="谁联系过我" @btnFun="jumpToPage('/pages/my/contactList/index')" />
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
import FixedBottomBtn from '@/component/FixedBottomBtn.vue';
export default {
  mixins: [commonMxins],
  data() {
    return {
      showFixedBottom: true,
      pageSize: 20,
      pageNum: 1,
      timestampFlag: '',
      keywords: '',
      procurementList: [],
      tagList: ['全部', '审核中', '正在找', '未通过', '已下架'],
      status: '0'
    };
  },
  components: { FixedBottomBtn },
  onShow() {
    this.getProcurementList();
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async getProcurementList() {
      let timestampFlag = 0; //第一次查询的是0
      let len = this.procurementList.length;
      if (len > 0) {
        timestampFlag = this.procurementList[len - 1].timestampFlag;
      }
      //这边为了防止丢数据(同一时间点N多人同时发)/查重复数据(刷新前有人发了新动态)，用timeStampFlag字段对动态进行排序，后端会对统一毫秒发的动态再加1毫秒，保证没有在同一时间有不同的人发动态
      let data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum++,
        timestampFlag,
        status: this.status == 0 ? '' : this.status,
        keywords: this.keywords
      };
      if (data.timestampFlag === 0) {
        delete data.timestampFlag;
      }
      let res = await api.request({ url: '/purchaseInfo/selectPageMyPurchaseInfo', data, method: 'GET' });
      this.procurementList = [...this.procurementList, ...res.data];
      if (res.data.length === 0) {
        uni.showToast({ title: '没有数据啦~~', icon: 'none' });
      }
    },
    async purchaseDel(item) {
      let res = await api.request({ url: '/purchaseInfo/delete', data: { purchaseInfoId: item.id }, method: 'GET' });
      if (res.code === 200) {
        uni.showToast({ title: '删除成功', icon: 'success', duration: 2000 });
        this.getProcurementList();
      }
    },
    async offShelf(item) {
      let res = await api.request({ url: '/purchaseInfo/offShelf', data: { purchaseInfoId: item.id }, method: 'GET' });
      if (res.code === 200) {
        uni.showToast({ title: '下架成功', icon: 'success', duration: 2000 });
        this.getProcurementList();
      }
    },
    viewClick(item) {
      uni.navigateTo({ url: '/pages/my/viewList?type=2' });
    },
    //跳转详情页，status 1表示表示正在找3表示已关闭，type look表示查看modify表示修改republish表示重新发布
    jumpProcurement(item, type) {
      uni.navigateTo({ url: `/pages/procurement/detail/index?purchaseInfoId=${item.id}&status=${item.status}&type=${type}` });
    },
    connectClick() {
      uni.navigateTo({ url: '/pages/my/contactList/index?contactIdx=1' });
    },
    tagClick(status) {
      this.status = status;
      this.procurementList = [];
      this.pageNum = 1;
      this.getProcurementList();
    },
    searchClick() {
      console.log(12);
      this.getProcurementList();
    }
  }
};
</script>
<style lang="scss" scoped>
.procurementList {
  .tagBox {
    padding: 20rem;
    box-sizing: border-box;
    height: 72rem;
    .tag {
      text-align: center;
      width: 65rem;
      height: 32rem;
      border-radius: 5rem;
      box-sizing: border-box;
      border: 1rem solid rgba(255, 124, 0, 1);
      line-height: 32rem;
      font-size: 16rem;
      color: rgba(255, 124, 0, 1);
      &.activeTag {
        color: #ffffff;
        background: linear-gradient(180deg, rgba(255, 202, 153, 1) 0%, rgba(252, 122, 0, 1) 100%);
      }
    }
  }
  .listBox {
    height: calc(100% - 72rem);
    padding: 0 12rem;
    box-sizing: border-box;
    border-top: 1rem solid #ff7c00;
    border-radius: 20rem 20rem 0 0;
    .scrollList {
      height: 100%;
      .itemBox {
        margin-top: 8rem;
        border-radius: 10rem;
        background: rgba(255, 251, 247, 1);
        padding: 12rem;
        box-sizing: border-box;
        .titleBox {
          width: calc(100% - 24rem);
          height: 32rem;
          .look,
          .check,
          .unpass,
          .under {
            font-size: 16rem;
            width: 65rem;
            height: 32rem;
            line-height: 32rem;
            text-align: center;
            border-radius: 5rem;
            color: #fff;
            margin-right: 10rem;
          }
          .look {
            background: rgba(255, 124, 0, 1);
          }
          .check {
            background: rgba(55, 133, 222, 1);
          }
          .unpass {
            background: rgba(255, 47, 0, 1);
          }
          .under {
            background: rgba(166, 166, 166, 1);
          }
          .titleLabel {
            width: calc(100% - 75rem);
            line-height: 32rem;
            font-weight: bold;
            font-size: 16rem;
            color: rgba(56, 56, 56, 1);
          }
        }
        .status {
          margin-top: 8rem;
          height: 26rem;
          .top {
            width: 64rem;
            height: 26rem;
            line-height: 26rem;
            font-size: 14rem;
            border-radius: 3rem;
            border: 1rem solid rgba(250, 52, 52, 1);
            color: rgba(250, 52, 52, 1);
            box-sizing: border-box;
          }
          .concrat {
            width: calc(100% - 64rem);
            .tagNum {
              width: 130rem;
              height: 26rem;
              line-height: 26rem;
              border-radius: 20rem 0rem 0rem 20rem;
              background: rgba(254, 243, 226, 1);
              font-size: 16rem;
            }
            .lookNum {
              border-radius: 20rem 0rem 0rem 20rem;
              margin-right: 8rem;
            }
            .connectNum {
              border-radius: 0rem 20rem 20rem 0rem;
              margin-right: 8rem;
            }
          }
        }
        .infoLabel {
          margin-top: 6rem;
          font-size: 14rem;
          line-height: 21rem;
        }
        .operateBox {
          margin-top: 6rem;
          height: 42rem;
          .timeBox {
            .time {
              font-size: 14rem;
              line-height: 21rem;
            }
            .userInfo {
              font-size: 14rem;
              line-height: 21rem;
            }
          }
          .operateList {
            .operate {
              box-sizing: border-box;
              line-height: 26rem;
              height: 26rem;
              padding: 0 10rem;
              border-radius: 3rem;
              margin-left: 6rem;
              &.modify {
                color: #32a862;
                border: 1rem solid #32a862;
              }
              &.customerSerive {
                color: #5678d6;
                border: 1rem solid #5678d6;
              }
              &.down {
                color: #ff8d1a;
                border: 1rem solid #ff8d1a;
              }
              &.del {
                color: #d43030;
                border: 1rem solid#D43030;
              }
              &.republic {
                color: #8061c9;
                border: 1rem solid #8061c9;
              }
            }
          }
        }
      }
      .noTop {
        margin-top: 0;
      }
    }
  }
}
</style>
